import React, { useEffect, useState } from 'react';
import { getChannelsAPI } from 'api/channel';
import { Select } from 'antd';

// 把value和onChange，托管给Form组件，Form源码内部会给自动接管你的value和onChange
//   1. 形参上定义value和onChange
//   2. value和onChange传给Select即可
//   3. 透传props 原封不动的扔给Select组件

const { Option } = Select;
// 1.新建Channel组件
export default function Channel(props) {
  // 2. 复制state  声明周期  JSX
  const [channelList, setChannelList] = useState([]);
  const loadChannels = async () => {
    const res = await getChannelsAPI();
    setChannelList(res.data.channels);
  };

  useEffect(() => {
    loadChannels();
  }, []);
  return (
    <Select  {...props}>
      {channelList.map((item) => (
        <Option key={item.id} value={item.id}>
          {item.name}
        </Option>
      ))}
    </Select>
  );
}